<template>
	<view class="container">
		<view class="content">
			<view class="content-tab d-rn d-ac d-ja">
				<view class="content-tab-one d-cw d-ac d-jc" v-for="(item, index) in 2" :key="index"
					@click="handleNav(index)">
					<text :class="navSts == index ? 'active' : 'outactive'">{{
					!index
						? $t('crew_scheduling')
						: index == 1
							? $t('shift_library_cycle_library')
							: index == 2
								? ""
								: $t('cycle_shift_library')
				}}</text>
					<text v-if="navSts == index"></text>
				</view>
			</view>

			<view class="rilis-top d-rn d-ac d-jb">
				<picker @change="bindPickerChange" :range="guzhuList" range-key="employeeName" class="picker">
					<view class="d-rn d-ac d-jc">
						<view class="picker-con d-cn d-jc d-ac">
							<view class="uni-input one-txt-cut" v-if="type.typeName">{{ type.typeName }}
							</view>
							<view class="uni-input one-txt-cut" v-else>{{ $t('all_members') }}</view>
						</view>
						<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
					</view>
				</picker>
				<view class="" style="color: #eeeeee"> | </view>
				<view class="">
					<u-search :placeholder="$t('please_enter_member_name')" v-model="searchValue" @search="handleSearch"
						@custom="handleSearch">
					</u-search>
				</view>
			</view>

			<view class="mains-all d-rn d-ac">
				<view class="mains-all-title">
					<text>{{ $t('shifts') }}</text>
				</view>
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrt" :enable-flex="true"
					:show-scrollbar="false" class="scrollview-box">
					<view class="mains-all-one">
						<text @click="handleGourl(item, index)" :id="'minCla' + index"
							v-for="(item, index) in banciList" :key="index"
							:class="tabNum == index ? 'actives' : 'outactives'">{{ item.classesName }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="mains-all">
				<view class="mains-all-title">
					<text>{{ $t('cycle_shift') }}</text>
				</view>
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrts" :enable-flex="true"
					:show-scrollbar="false" class="scrollview-box">
					<view class="mains-all-one">
						<text @click="handleGourls(item, index)" :id="'minClas' + index"
							v-for="(item, index) in weekList" :key="index"
							:class="tabNums == index ? 'actives' : 'outactives'">{{ item.classeName }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="mains-all">
				<view class="mains-all-title">
					<text>{{ $t('status') }}</text>
				</view>
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="minSelCrtss" :enable-flex="true"
					:show-scrollbar="false" class="scrollview-box">
					<view class="mains-all-one">
						<text @click="handleGourlss(item, index)" :id="'minClass' + index"
							v-for="(item, index) in numList" :key="index"
							:class="tabNumss == index ? 'actives' : 'outactives'">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- @click="handleGoDetails" -->
		<view class="rili">
			<u-calendar ref="calendar" :nowMonth="nowMonth" :sts="false" :maxDate="maxDate" :minDate="minDate"
				@changeYear="changeYear" @handleGetRiFather="handleGetRiFather" @handleGetMonth="handleGetMonth"
				:yearsNum="yearsNum"></u-calendar>
			<!-- <u-calendar ref="calendar" :listss="listss" v-if="listss && listss.length"></u-calendar> -->
		</view>

		<view class="d-rn d-jb">
			<!-- <view class="order-name">
				<view class="order-name-list">
					<view class="order-name-list-one" v-for="(item,index) in riliList" :key="index">
						<text>{{item.empName}}</text>
					</view>
				</view>
			</view> -->
			<view class="order d-cn d-je">
				<view class="order-table d-rn d-je d-ac">
					<u-icon name="arrow-left" color="#8F9BB3" size="32rpx" class="nexleft" @click="changeWeek(-7)">
					</u-icon>
					<view class="order-table-head d-cn d-as">
						<view class="order-table-head-right d-rn d-jb">
							<text class="d-rn d-jc" v-for="(weekName, i) in dayWeekList">{{ weekName }}</text>
							<!-- <text class="d-rn d-jc">二</text>
							<text class="d-rn d-jc">三</text>
							<text class="d-rn d-jc">四</text>
							<text class="d-rn d-jc">五</text>
							<text class="d-rn d-jc">六</text>
							<text class="d-rn d-jc">日</text> -->
						</view>
					</view>
					<u-icon name="arrow-right" color="#8F9BB3" size="32rpx" class="nexleft" @click="changeWeek(+7)">
					</u-icon>
				</view>
				<view class="pople">
					<view class="pople-one" v-for="(item, index) in riliList" :key="index">
						<view class="pople-one-onlist d-rn">
							<view class="pople-one-onlist-left d-rn d-jc u-line-2">
								{{ item.empName }}
							</view>
							<view class="pople-one-onlist-right d-rn d-jb">
								<view class="pople-one-onlist-right-one d-cn d-ac"
									v-for="(items, indexs) in item.dayList" :key="indexs">
									<text v-if="items.date">{{
					items.date.substring(8, 10)
				}}</text>
									<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc"
										v-for="(itemq, indexq) in items.classesList" :key="indexq">
										<text class="one-txt-cut" :style="{ background: itemq.shiftColor }">{{
					itemq.shiftName }}</text>
									</view>
									<template v-if="items.customHolidayNames.length">
										<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc"
											v-for="(holiday, holidayIndex) in items.customHolidayNames"
											:key="holidayIndex">
											<text class="one-txt-cut" style="background: #f8b501">{{ holiday }}</text>
										</view>
									</template>

									<template v-if="items.statutoryHolidays">
										<view class="pople-one-onlist-right-one-class d-cn d-ac d-jc">
											<text class="one-txt-cut" style="background: #f82201">{{
					items.statutoryHolidaysName }}</text>
										</view>
									</template>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer d-rn d-ac d-ja" style="justify-content: flex-end">
			<text class="d-rn d-ac d-jc" @click="handlePiLiang">{{ $t('batch_scheduling') }}</text>
			<text style="margin-left: 20rpx" class="d-rn d-ac d-jc" @click="updatePaiban">{{ $t('edit_scheduling')
				}}</text>
			<!-- <text class="d-rn d-ac d-jc">保存</text> -->
			<text class="d-rn d-ac d-jc" @click="isPub">{{ $t('publish') }}</text>
		</view>
		<!-- 选择年份 -->
		<u-picker :show="changeYearShow" :columns="columns" @cancel="changeYearShow = false"
			@confirm="changeYearConfirm" :defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>


import {
	classesList,
	cycleAllList,
	getClasses,
	userList,
	isPub,
} from "../../api/index.js";
import moment from "moment";
export default {
	data() {
		return {
			changeYearShow: false,
			show: true,
			mode: "range",
			phoneInfo: uni.getSystemInfoSync(),
			type: {
				typeName: "",
				typeId: "",
			},
			isEndTime: true,
			isStartTime: true,
			topTitBox: 0,
			navSts: 0,
			tabNum: 0,
			// 中部分类==选择
			minCla: 0,
			// 底部分类滑动描点
			minSelCrt: null,

			listss: [{
				month: "1",
				date: [{
					day: "1",
					value: [{
						name: this.$t('early_shift'),
					},
					{
						name: this.$t('late_shift'),
					},
					],
				},],
			},],
			searchValue: "",
			navSts: 0,

			tabNums: 0,
			minClas: 0,
			// 底部分类滑动描点
			minSelCrts: null,

			tabNumss: 0,
			minClass: 0,
			// 底部分类滑动描点
			minSelCrtss: null,

			maxDate: "",
			minDate: "",
			orderList: [],

			// 班次
			banciList: [],

			//周期班
			weekList: [],
			// 选中周期班id
			week_id: "",
			// 状态
			numList: [{
				name: this.$t('all'),
				id: null,
			},
			{
				name: this.$t('published'),
				id: 1,
			},
			{
				name: this.$t('unpublished'),
				id: 0,
			},
			],
			// 选中状态id
			class_id: "",
			// 当前月份
			nowMonth: "",
			// 日历
			riliList: [],
			// 日历展示
			dayList: [],
			// 年
			needYear: "",
			// 月
			monthValue: "",
			// 雇主列表
			guzhuList: [],

			nowDate: moment().startOf("week").add(1, "day"),
			yearsNum: "",
			needDate: "",
			Arr: [],
			year: "",
			employerId: uni.getStorageSync("curEmployerId"),
			columns: [
				[2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032,
					2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045
				]
			],
			dayWeekList: []
		};
	},
	onReady() {
		// 如果需要兼容微信小程序的话，需要用此写法
		// this.$refs.calendar.setFormatter(this.formatter)
	},
	onShow() {
		this.topTitBox = this.phoneInfo.statusBarHeight;
		var today = new Date();
		var year = today.getFullYear();
		this.year = today.getFullYear();
		this.yearsNum = today.getFullYear();
		this.defaultIndex = [this.columns[0].findIndex(v => v == this.yearsNum)]
		let monthab = null;
		this.needYear = today.getFullYear();
		this.maxDate = year + "-12-31";
		this.minDate = year + "-1-1";
		this.nowMonth = today.getMonth() + 1;
		this.dayNum = today.getDate();
		monthab = this.nowMonth + 1;
		if (monthab < 10) {
			monthab = "0" + monthab;
		}
		this.monthValue = monthab;
		if (this.dayNum < 10) {
			this.dayNum = "0" + this.dayNum;
		}
		this.yearMonthDay = this.year + "-" + monthab + "-" + this.dayNum;
		this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
		// 	this.getdate();
		if (this.riliList.length) {
			this.getdate();
		}
		this.getclassesList();
		this.getcycleList();
		this.getuserList();
	},
	watch: {},
	methods: {
		getWeekdays(dateArray) {
			const weekdays = [this.$t('sunday'), this.$t('monday'), this.$t('tuesday'), this.$t('wednesday'), this.$t('thursday'), this.$t('friday'), this.$t('saturday')];



			const result = [];
			dateArray.forEach(date => {
				const dayOfWeek = new Date(date).getDay();
				result.push(weekdays[dayOfWeek]);
			});
			return result;
		},
		changeYearConfirm(e) {
			console.log('e', e);
			this.yearsNum = e.value[0];
			this.needYear = e.value[0];
			this.changeYearShow = false;
			this.yearMonthDay = `${this.yearsNum}-${this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
				}-${this.dayNum}`;
			this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
			if (this.needDate.length) {
				this.getdate();
			}
			this.getclassesList();
			this.getcycleList();
			this.getuserList();
		},
		changeYear(flag) {
			this.changeYearShow = flag;
			console.log('点击了年份')

		},
		isPub() {
			let that = this;
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('confirm_content', { content: '发布' }),
				success: function (res) {
					if (res.confirm) {
						let empIdList = that.guzhuList.filter((item) => item.id);
						let params = {
							empIdList: empIdList.map((item) => item.id),
							employerId: that.employerId,
							startTime: that.needDate[0],
							endTime: that.needDate[6],
						};
						isPub(params).then((res) => {
							that.$commonFun.showTips("发布成功");
							that.getdate();
							that.getclassesList();
							that.getcycleList();
							that.getuserList();

						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		changeWeek(num) {
			if (!this.isEndTime && num > 0) {
				uni.$u.toast("最后一个月");
				return;
			}
			if (!this.isStartTime && num < 0) {
				uni.$u.toast("第一个月");
				return;
			}
			this.nowDate = this.nowDate.month(this.nowMonth - 1).add(num, "d");
			this.getList(this.nowDate);
		},
		getList(firstDayOfWeek) {
			const days = [];
			for (let i = 0; i < 7; i++) {
				let date = moment(firstDayOfWeek).add(i, "day").format("YYYY-MM-DD");
				days.push(date);
			}
			this.dayList = days;
			this.needDate = days;
			this.getdate();
			this.nowMonth = Number(this.dayList[0].substring(5, 7));
			// 判断是否是当年最后一个月
			this.isEndTime = moment(days[days.length - 1]).isBefore(
				`${this.yearsNum}-12-31`
			);
			// 判断是否是本年第一个月
			this.isStartTime = moment(days[0]).isAfter(`${this.yearsNum}-01-01`);
		},
		// 获取雇主
		getuserList() {
			userList({
				pageNum: 1,
				pageSize: 999,
				employerId: this.employerId,
			}).then((res) => {
				this.guzhuList = res.data.records;
				this.guzhuList.unshift({
					employeeName: "全部成员",
					id: null,
				});
			});
		},
		// h获取班次
		getclassesList() {
			classesList().then((res) => {
				if (res.code == 200) {
					this.banciList = res.data.map((item) => {
						return {
							classesName: item.shiftName,
							id: item.id,
						};
					});
					this.banciList.unshift({
						classesName: "全部",
						id: null,
					});
				}
			});
		},
		// 获取周期班

		getcycleList() {
			cycleAllList().then((res) => {
				if (res.code == 200) {
					this.weekList = res.data.map((item) => {
						return {
							classeName: item.cycleName,
							id: item.id,
						};
					});
					this.weekList.unshift({
						classeName: "全部",
						id: null,
					});
				}
			});
		},
		getdate(params = {}) {
			this.Arr = [];
			this.riliList = [];
			getClasses({
				startTime: this.needDate[0],
				endTime: this.needDate[6],
				employerId: this.employerId,
				employeeId: this.type.typeId,
				employeeName: this.searchValue,
				shiftId: this.class_id,
				cycleId: this.week_id,
				status: this.cate_id,
				...params,
			}).then((res) => {
				if (res.code == 200) {
					this.riliList = res.data;
					console.log('this.riliList', this.riliList)
					if (this.riliList && this.riliList.length) {
						this.dayWeekList = this.getWeekdays(this.riliList[0].dayList.map(v => v.date))
					}

				}
			});
		},
		handleGetRiFather(e) {
			console.log("e", e);
		},
		bindPickerChange(e) {
			this.type.typeName = this.guzhuList[e.detail.value].employeeName;
			this.type.typeId = this.guzhuList[e.detail.value].id;
			this.getdate();
		},
		handleNav(index) {
			// this.navSts = index;
			if (index == 1) {
				this.$commonFun.goUrl(1, "../shiftRoom/index");
			}
		},
		// 班次
		handleGourl(val, index) {
			this.tabNum = index;
			this.class_id = val.id;
			if (index > 0 && index < this.numList.length) {
				this.$nextTick(() => {
					this.minSelCrt = "minCla" + (index - 2);
				});
			}
			this.getdate();
		},
		handleGourls(val, index) {
			this.tabNums = index;
			this.week_id = val.id;
			if (index > 0 && index < this.numList.length) {
				this.$nextTick(() => {
					this.minSelCrts = "minClas" + (index - 2);
				});
			}
			this.getdate();
		},
		handleGourlss(val, index) {
			this.tabNumss = index;
			this.cate_id = val.id;
			if (index > 0 && index < this.numList.length) {
				this.$nextTick(() => {
					this.minSelCrtss = "minClass" + (index - 2);
				});
			}
			this.getdate();
		},
		handleSearch() {
			this.type.typeName = "全部成员";
			this.type.typeId = null;
			this.getdate();
		},
		handleGoDetails() {
			this.$commonFun.goUrl(1, "../crewSchedulingDetail/index");
		},
		handlePiLiang() {
			this.$commonFun.goUrl(1, "../batchScheduling/index");
		},
		handleGetMonth(e) {
			this.nowMonth = e + 1;
			this.yearMonthDay = `${this.yearsNum}-${this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
				}-${this.dayNum}`;
			this.needDate = this.$commonFun.timesWeekA(this.yearMonthDay);
			if (this.needDate.length) {
				this.getdate();
			}
		},
		updatePaiban() {
			this.$commonFun.goUrl(1, "../updatePaiBan/index");
		},
	},
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.container {
	width: 100%;

	.content {
		&-tab {
			background-color: #ffffff;
			padding: 24rpx 0;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1px solid #f5f5f5;

			text:nth-of-type(1) {
				font-size: 30rpx;
			}

			text:nth-of-type(2) {
				width: 138rpx;
				height: 4rpx;
				background-color: #fdb911;
				position: absolute;
				top: 93%;
			}

			.active {
				color: #333333;
				font-weight: 500;
			}

			.outactive {
				color: #999999;
			}
		}

		.rilis-top {
			padding: 22rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background-color: #ffffff;

			.bottom {
				width: 16rpx;
				height: 8rpx;
				margin-left: 10rpx;
			}
		}

		.mains {
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&-all {
				width: 100%;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				font-size: 16px;
				text-align: center;
				white-space: nowrap;
				border-bottom: 1px solid #eeeeee;
				background-color: #ffffff;

				scroll-view {
					width: 71%;
				}

				&-one {
					width: 100%;
					display: flex;
					align-items: center;
					flex-flow: row nowrap;
					padding: 0 20rpx;
					box-sizing: border-box;

					text {
						margin-right: 40rpx;
						font-size: 26rpx;
						color: #333333;
					}

					.actives {
						color: #ffd03d;
					}
				}

				&-title {
					padding: 22rpx 34rpx;
					box-sizing: border-box;

					text {
						display: inline-block;
						width: 100rpx;
						font-size: 28rpx;
						color: #333333;
						text-align: left;
					}
				}
			}
		}
	}

	.rili {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.order {
		width: 100%;
		background-color: #f4f5f7;
		box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.nexleft {
			padding-top: 20rpx;
			box-sizing: border-box;
		}

		&-title {
			margin-bottom: 25rpx;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				width: 90rpx;
				height: 42rpx;
				border-radius: 2em;
				background-color: #f4f5f7;
				font-size: 24rpx;
				color: #999990;
			}
		}

		&-name {
			width: 100rpx;
			background-color: #f4f5f7;
			padding-left: 20rpx;
			padding-top: 110rpx;
			box-sizing: border-box;

			&-list {
				margin-top: 30rpx;

				&-one {
					margin-bottom: 40rpx;
				}
			}
		}

		&-table {
			width: 100%;
			background-color: #f4f5f7;
			padding: 20rpx 0px;
			padding-left: 38rpx;
			box-sizing: border-box;

			&-head {
				width: 90%;

				text {
					font-size: 26rpx;
					color: #999999;
					width: 80rpx;
				}

				&-left {
					width: 100rpx;
					padding-top: 60rpx;
					box-sizing: border-box;
				}

				&-right {
					width: 100%;
					margin-top: 20rpx;

					text {}
				}
			}

			&-info {
				margin-top: 20rpx;

				&-one {
					width: 100%;
					padding-left: 10rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					&-date {
						width: 50rpx;

						&-one {
							text {
								width: 50rpx;
								display: block;
							}

							text:nth-of-type(1) {
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 4rpx;
							}
						}
					}
				}
			}
		}

		.pople {
			width: 100%;

			&-one {
				width: 100%;
				margin-bottom: 10rpx;

				&-onlist {
					width: 100%;

					&-left {
						min-width: 80rpx;
						max-width: 80rpx;
						width: 80rpx;
						font-size: 20rpx;
						text-align: center;
					}

					&-right {
						width: 100%;
						padding-right: 40rpx;
						box-sizing: border-box;

						&-one {
							width: 80rpx;
							max-width: 80rpx;
							min-width: 80rpx;

							&-class {
								width: 100%;
								margin-bottom: 2rpx;

								text {
									display: block;
									min-width: 80rpx;
									max-width: 80rpx;
									width: 80rpx;
									text-align: center;
									color: #ffffff;
									font-size: 14rpx;
								}
							}
						}

						.outactive {}

						.active {
							background-color: #ffd03d;
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 106rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0%;
		left: 0%;

		text {
			width: 152rpx;
			height: 58rpx;
			border-radius: 2em;
			font-size: 26rpx;
			margin: 0 20rpx;
		}

		text:nth-of-type(1),
		text:nth-of-type(2) {
			border: 1px solid #e5e5e5;
		}

		text:nth-of-type(3) {
			border: 1px solid #fed227;
			background: #fed227;
		}
	}
}
</style>